<template>
  <!--  数据列表显示-->
  <div v-show="vMode !== 'view'">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in vList" :key="item.id" :label="item.describe" :value="item.publish_time" @click="view(item)"
        is-link>
        <template #title>
          <span class="custom-title">{{ item.title }}</span>
        </template>
      </van-cell>
    </van-list>
  </div>
  <div v-show="vMode === 'view'">
    <van-nav-bar :title="vRow.title" left-text="返回" left-arrow @click-left="vMode = 'list'" />
    <van-cell text="" :value="`${vRow.cuser} 发布`" />
    <van-cell title="简介" :label="vRow.describe" />
    <van-cell title="发布时间" :value="vRow.publish_time" />
    <div class="atcl-content">{{ vRow.content }}}</div>
  </div>
</template>

<script lang="ts" setup>
import { Wap } from "../../../common/wap";
import { showFailToast } from "vant";
import { Ref, ref } from "vue";

const vList: Ref<Array<KvObj>> = ref([]);
const vRow: Ref<KvObj> = ref({});
const loading = ref(false);
const finished = ref(false);
const vMode = ref("");

// 文件加载
function onLoad() {
  Wap.post("/api/article", null, { login: false })
    .then((result) => {
      if (result.status === "ok") {
        let listing = result.data.list || [];
        if (!listing || listing.length === 0) {
          finished.value = true;
          loading.value = false;
        } else {
          loading.value = false;
          finished.value = false;
        }
        vList.value = listing;
      } else {
        showFailToast(result.msg);
      }
      finished.value = true;
      loading.value = false;
    })
    .catch((error) => {
      console.log(error);
      finished.value = true;
    });
}

// 内容渲染
function view(rowData: KvObj) {
  vRow.value = rowData;
  vMode.value = "view";
  Wap.get(`/api/article/${rowData.id}`).then((result) => {
    if (result.status === "ok") {
      vRow.value = Object.assign({}, rowData, result.data);
    } else {
      showFailToast(result.msg);
    }
  });
}
</script>

<style scoped>
.atcl-content {
  padding: 5px 2px 2px 5px;
  text-indent: 20px;
}
</style>